<template>
	<view class="container">
		<cu-custom :isBack="true"  bgColor="bg-white">
			<block slot="content">筛选</block>
		</cu-custom>
		<view class="page_header">
			<view class="title uni-flex">
				<view class="titleOne" :class="{'titleActive':currentIndex==index}" v-for="(item,index) in titleArr"
					:key="index" @click="tapTitle(index)">
					<view class="titleText">{{item}}</view>
					<view class="blueBorder"></view>
				</view>
			</view>
		</view>

		<view class="mainCont" v-if="tabIndex==0" data-index="0" @tap="setCurr">
		</view>
		<view class="mainCont" v-if="tabIndex==1" data-index="1" @tap="setCurr">
		</view>
		<view class="mainCont" v-if="tabIndex==3" data-index="2" @tap="setCurr">
		</view>
		<swiper style="height: 100vh;margin-top: 45px;" :current="tabIndex" @change="setCurr">
			<swiper-item>
				<scroll-view>
					<view class="bg-white grid col-3 padding-sm">
						<view class="boxs">
							<view class="boxsTxt"  @click="chooesProv" :data-text="'省本级'">
								湖南省
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view>
					<!-- <view style="display: flex;box-sizing: border-box;"> -->
					<view class="bg-white grid col-3 padding-sm">
						<view class="boxs" v-for="(item,index) in city" :key="index" 
						@click="shizhou" :data-text="item.text" :data-val="item.val">
							<view class="boxsTxt">
								{{item.text}}
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view>

					<view v-for="(item,index) in city" :key="index">
						<view class="wrap" @click="open(item,index)">
							<view>
								{{item.text}}
							</view>
							<image style="width: 30rpx;height: 30rpx;" :src="item.open?item.url2:item.url1">
							</image>
						</view>
						<view class="bg-white grid col-3 padding-sm" v-if="item.open==true">
							<view class="boxs" v-for="(item,index) in country" :key="index" 
							 @click="xianshi" :data-text="item.text" :data-val="item.val">
								<view class="boxsTxt">
									{{item.text}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>

</template>

<script>
	// import swiperNav from "@/components/wee-swiper-nav/wee-swiper-nav.vue";
	export default {
		//   components: {
		//           swiperNav
		//       },
		data() {
			return {
				titleArr: ['省级', '市州级', '县市级'],
				current: 0,
				currentIndex: 0,
				tabIndex: 0,
				city: [],
				country: [],
				backData:{
					contentText:'',
					level:'',
					cityid:'',
					countryid:''
				}
			}
		},
		onLoad() {
			this.getCity()
		},
		methods: {
			getCity() {
				this.$http.get("/project/v1/getCityList.do")
					.then(res => {
						console.log(res)
						if (res.statusCode == 200) {
							res.data.forEach(item => {
								item.open = false;
								item.url1 = '../../static/icon/downArrow.png';
								item.url2 = '../../static/icon/upArrow.png';
							})
							this.city = res.data
							console.log(this.city)
						}
					}).catch(e => {
						console.log("请求错误", e)
					});
			},
			setCurr(e) {
				// console.log(e.detail.current)
				let thisCurr = e.detail.current || e.currentTarget.dataset.index || 0;
				// console.log(thisCurr)
				this.tabIndex = thisCurr;
				this.currentIndex = this.tabIndex;
				this.tabIndex = this.tabIndex;
				let indexs = e.detail.current - 1
				this.scrollLeft = indexs * 80
			},

			tapTitle(index) {
				this.currentIndex = index;
				this.tabIndex = index
			},
			open(item, index) {

				this.city.forEach(i => {
					if (i.open !== this.city[index].open) {
						i.open = false;
					}
				})
				item.open = !item.open
				console.log(item.open)
				if (item.open == true) {
					this.$http.get("/project/v1/getCountryList.do?val=" + item.val)
						.then(res => {
							if (res.statusCode == 200) {
								this.country = res.data
								console.log(res)
							}
						}).catch(e => {
							console.log("请求错误", e)
						});
				}
			},
			chooesProv(e){
				// let provText = e.currentTarget.dataset.text;
				// console.log(e.currentTarget.dataset.text);
				this.backData.contentText = e.currentTarget.dataset.text;
				this.backData.level = "省级"
				// 获取页面栈
				let pages = getCurrentPages()
				// 获取上一页栈
				let prevPage = pages[ pages.length - 2 ]
				// 触发上一页 upData 函数(并携带参数)
				prevPage.$vm.upData(this.backData)
				uni.navigateBack({
					delta: 1
				})
			},
			shizhou(e){
				this.backData.contentText = e.currentTarget.dataset.text;
				this.backData.cityid = e.currentTarget.dataset.val;
				this.backData.level = "市级"
				// 获取页面栈
				let pages = getCurrentPages()
				// 获取上一页栈
				let prevPage = pages[ pages.length - 2 ]
				// 触发上一页 upData 函数(并携带参数)
				prevPage.$vm.upData(this.backData)
				uni.navigateBack({
					delta: 1
				})
			},
			xianshi(e){
				this.backData.contentText = e.currentTarget.dataset.text;
				this.backData.level = "县级";
				this.backData.countryid = e.currentTarget.dataset.val;
				// 获取页面栈
				let pages = getCurrentPages()
				// 获取上一页栈
				let prevPage = pages[ pages.length - 2 ]
				// 触发上一页 upData 函数(并携带参数)
				prevPage.$vm.upData(this.backData)
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	@import "uni.css";

	scroll-view {
		padding: 0 20px;
	}

	.title {
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
		height: 45px;
		line-height: 45px;
		align-items: center;
		border-bottom: solid #F5F6F7 1px;
	}

	.titleOne {
		width: 100px;
		height: 100%;
		position: relative;
	}
	
	
	.page_header {
		position: fixed;
		width: 100%;
		z-index: 1;
		background: #FFFFFF;
	}

	.blueBorder {
		width: 30px;
		height: 4px;
		background-color: #007AFF;
		border-radius: 16px;
		position: absolute;
		bottom: 0;
		left: 33px;
	}

	.title .titleActive .blueBorder {
		display: block;
	}

	.title .blueBorder {
		display: none;
	}

	.titleText {
		color: #93A0AD;
		font-size: 18px;
		text-align: center;
	}

	.title .titleText {
		color: #93A0AD;
	}

	.title .titleActive .titleText {
		color: #333;
	}

	.mainCont {
		width: 100%;
		padding: 0 20px;
	}

	.boxs {
		width: 33%;
		padding: 7px;
	}

	.grid.col-3>uni-view {
		width: 33.3%;
	}

	.boxsTxt {
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		border-radius: 5px;
		border: 1px solid #cecece;
	}

	.wrap {
		display: flex;
		justify-content: space-between;
		font-size: 18px;
		color: #3e3e3e;
		margin: 15px 0 0 0;
	}
</style>
